//console.log("hello,world");


const canvas=document.getElementById('canvas');

const context=canvas.getContext('2d');




//云朵1
context.beginPath();
context.arc(265,300,50,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(340,290,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(430,290,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(340,320,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();


//云朵2
context.beginPath();
context.arc(180,550,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(250,500,40,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(250,580,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(350,580,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(430,560,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(330,500,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(430,520,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(500,540,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();



//云朵3
context.beginPath();
context.arc(880,550,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(950,500,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(950,580,100,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(1050,580,100,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(1130,560,100,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(1030,500,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(1180,560,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(1000,540,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();


//云朵4
context.beginPath();
context.arc(1180,250,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(1230,190,40,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(1250,280,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(1350,280,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(1430,260,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(1330,200,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(1430,220,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();

context.beginPath();
context.arc(1500,240,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#6495ED";
context.fill();



//云朵5
context.beginPath();
context.arc(100,150,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(150,90,40,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(170,180,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(270,180,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(350,160,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(250,100,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(350,120,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();

context.beginPath();
context.arc(420,140,60,0,Math.PI*2,true);
context.closePath();
context.fillStyle="black";
context.fill();




//火箭顶

context.beginPath();
context.moveTo(650,200);
context.lineTo(765,70);
context.lineTo(880,200);
context.fill();

context.beginPath();
context.moveTo(620,450);
context.lineTo(765,350);
context.lineTo(910,450);
context.fill();


//火箭火焰

context.beginPath();
context.moveTo(630,610);
context.lineTo(665,650);
context.lineTo(700,610);
context.fillStyle="orange";
context.fill();

context.beginPath();
context.moveTo(830,610);
context.lineTo(865,650);
context.lineTo(900,610);
context.fillStyle="orange";
context.fill();

context.beginPath();
context.moveTo(710,610);
context.lineTo(765,730);
context.lineTo(820,610);
context.fillStyle="orange";
context.fill();

context.beginPath();
context.moveTo(710,610);
context.lineTo(765,680);
context.lineTo(820,610);
context.fillStyle="red";
context.fill();





//火箭本体


context.beginPath();
context.fillStyle='white';
context.fillRect(700,200,130,400);

context.beginPath();
context.fillStyle='white';
context.fillRect(630,450,60,150);

context.beginPath();
context.fillStyle='white';
context.fillRect(840,450,60,150);



//火箭窗户
context.beginPath();
context.arc(765,280,40,0,Math.PI*2,true);
context.closePath();
context.fillStyle="blue";
context.fill();

context.beginPath();
context.arc(765,280,30,0,Math.PI*2,true);
context.closePath();
context.fillStyle="87CEFA";
context.fill();

context.beginPath();
context.arc(765,380,40,0,Math.PI*2,true);
context.closePath();
context.fillStyle="blue";
context.fill();

context.beginPath();
context.arc(765,380,30,0,Math.PI*2,true);
context.closePath();
context.fillStyle="87CEFA";
context.fill();



//画月亮

context.beginPath();
context.moveTo(1100,500);


//外圆
context.quadraticCurveTo(1230,510,1140,630);


//内圆
context.quadraticCurveTo(1180,540,1100,500);
context.fillStyle="yellow";
context.stroke();
context.fill();


//文字
context.beginPath();
context.font = 'normal 120px 黑体';
context.strokeStyle = '#FFF';
context.strokeText('Ambery', 900, 150);

context.beginPath();
context.font = 'normal 120px 黑体';
context.strokeStyle = '#FFF';
context.strokeText('19027223', 80, 150);


//楼房

//窗户

context.strokeRect(50,750,200,200);
context.fillStyle="skyblue";
context.fillRect(80,780,50,50);
context.beginPath();
context.rect(50,750,200,200);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(50,750);
context.lineTo(150,710);
context.lineTo(250,750)
context.closePath();
context.stroke();

//窗户杠

context.beginPath();
context.moveTo(105,780);
context.lineTo(105,830);
context.closePath();
context.stroke();
context.moveTo(80,805);
context.lineTo(130,805);
context.closePath();
context.stroke();

//门

context.strokeRect(50,750,200,200);
context.fillStyle = "gray";
context.fillRect(180,850,50,100);
context.beginPath();
context.rect(50,750,200,200);
context.stroke();
context.closePath();

//门把手

context.beginPath();
context.strokeRect(215,900,5,10);
context.fillStyle = "black";
context.fillRect(215,900,5,10);
context.stroke();
context.closePath();



//烟囱

context.beginPath();
context.moveTo(175,720);
context.lineTo(175,710);
context.closePath();
context.stroke();
context.moveTo(195,730);
context.lineTo(195,710);
context.closePath();
context.stroke();
context.moveTo(175,710);
context.lineTo(195,710);
context.closePath();
context.stroke();



//楼房

//窗户

context.strokeRect(250,750,200,200);
context.fillStyle="skyblue";
context.fillRect(280,780,50,50);
context.beginPath();
context.rect(250,750,200,200);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(250,750);
context.lineTo(350,710);
context.lineTo(450,750)
context.closePath();
context.stroke();

//窗户杠

context.beginPath();
context.moveTo(305,780);
context.lineTo(305,830);
context.closePath();
context.stroke();
context.moveTo(280,805);
context.lineTo(330,805);
context.closePath();
context.stroke();

//门

context.strokeRect(250,750,200,200);
context.fillStyle = "gray";
context.fillRect(380,850,50,100);
context.beginPath();
context.rect(250,750,200,200);
context.stroke();
context.closePath();

//门把手

context.beginPath();
context.strokeRect(415,900,5,10);
context.fillStyle = "black";
context.fillRect(415,900,5,10);
context.stroke();
context.closePath();



//烟囱

context.beginPath();
context.moveTo(375,720);
context.lineTo(375,710);
context.closePath();
context.stroke();
context.moveTo(395,730);
context.lineTo(395,710);
context.closePath();
context.stroke();
context.moveTo(375,710);
context.lineTo(395,710);
context.closePath();
context.stroke();



//楼房

//窗户

context.strokeRect(450,750,200,200);
context.fillStyle="skyblue";
context.fillRect(480,780,50,50);
context.beginPath();
context.rect(450,750,200,200);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(450,750);
context.lineTo(550,710);
context.lineTo(650,750)
context.closePath();
context.stroke();

//窗户杠

context.beginPath();
context.moveTo(505,780);
context.lineTo(505,830);
context.closePath();
context.stroke();
context.moveTo(480,805);
context.lineTo(530,805);
context.closePath();
context.stroke();

//门

context.strokeRect(450,750,200,200);
context.fillStyle = "gray";
context.fillRect(580,850,50,100);
context.beginPath();
context.rect(450,750,200,200);
context.stroke();
context.closePath();

//门把手

context.beginPath();
context.strokeRect(615,900,5,10);
context.fillStyle = "black";
context.fillRect(615,900,5,10);
context.stroke();
context.closePath();



//烟囱

context.beginPath();
context.moveTo(575,720);
context.lineTo(575,710);
context.closePath();
context.stroke();
context.moveTo(595,730);
context.lineTo(595,710);
context.closePath();
context.stroke();
context.moveTo(575,710);
context.lineTo(595,710);
context.closePath();
context.stroke();



//星球

context.beginPath();
context.arc(220,380,90,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#FFDAB9";
context.fill();


context.beginPath();
context.arc(250,375,15,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#F08080";
context.fill();


context.beginPath();
context.arc(180,390,30,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#F08080";
context.fill();



context.beginPath();
context.arc(1400,300,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#FFDAB9";
context.fill();

context.beginPath();
context.arc(1380,320,20,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#F08080";
context.fill();

context.beginPath();
context.arc(1430,270,30,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#F08080";
context.fill();


context.beginPath();
context.arc(1130,450,100,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#F08080";
context.fill();

context.beginPath();
context.arc(1100,410,50,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#FFDAB9";
context.fill();

context.beginPath();
context.arc(1180,500,20,0,Math.PI*2,true);
context.closePath();
context.fillStyle="#FFDAB9";
context.fill();



//星星1
context.strokeStyle = 'yellow';   
context.translate(500,300); 
context.fillStyle = 'yellow'; 
drawStar1(context); 

context.fill();  
context.stroke();

//星星2
context.strokeStyle = 'red';   
context.translate(700,300); 
context.fillStyle = 'red'; 
drawStar2(context); 

context.fill();  
context.stroke();

//星星3
context.strokeStyle = '#FF8000';   
context.translate(-200,-200); 
context.fillStyle = '#FF8000'; 
drawStar3(context); 

context.fill();  
context.stroke();

//星星3
context.strokeStyle = '#FF8000';   
context.translate(-100,-800); 
context.fillStyle = '#FF8000'; 
drawStar2(context); 

context.fill();  
context.stroke();

//星星4
context.strokeStyle = 'red';   
context.translate(300,300); 
context.fillStyle = 'red'; 
drawStar3(context); 

context.fill();  
context.stroke();



//尺寸1
function drawStar1(context)

{ 

var r = 80; 
context.beginPath()
context.moveTo(r,0);

for (var i=0;i<9;i++)

{

    context.rotate(Math.PI/5);

    if(i%2 == 0)

       context.lineTo((r/2),0);

    else

       context.lineTo(r,0);        

}

context.closePath();

}


//尺寸2
function drawStar2(context)

{ 

var r = 50; 
context.beginPath()
context.moveTo(r,0);

for (var i=0;i<9;i++)

{

    context.rotate(Math.PI/5);

    if(i%2 == 0)

       context.lineTo((r/2),0);

    else

       context.lineTo(r,0);        

}

context.closePath();

}


//尺寸3
function drawStar3(context)

{ 

var r = 100; 
context.beginPath()
context.moveTo(r,0);

for (var i=0;i<9;i++)

{

    context.rotate(Math.PI/5);

    if(i%2 == 0)

       context.lineTo((r/2),0);

    else

       context.lineTo(r,0);        

}

context.closePath();

}












